import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import { getSidebarStatus, getSize, setSidebarStatus, setLanguage, setSize } from '@/utils/cookies'
// import { getLocale } from '@/locales'
import { store } from '@/store'

//设备是手机还是桌面电脑
export enum DeviceType {
  Mobile,
  Desktop,
}

export interface AppState {
  device: DeviceType
  sidebar: {
    opened: boolean    //是否开启折叠
    withoutAnimation: boolean    //是否有动画
  }
  language: string   //语言
  size: string    //尺寸
}

@Module({ dynamic: true, store, name: 'app' })
class App extends VuexModule implements AppState {
  public sidebar = {
    opened: getSidebarStatus() !== 'closed',
    withoutAnimation: false
  }

  public device = DeviceType.Desktop
  public language = ''; //getLocale()  App.vue有定义,所以默认为中文.
  public size = getSize() || 'medium'  //要么就是小尺寸要么就是自己定义!

  //切换左侧菜单栏的折叠或扩张状态
  @Mutation
  private TOGGLE_SIDEBAR(withoutAnimation: boolean) {
    this.sidebar.opened = !this.sidebar.opened
    this.sidebar.withoutAnimation = withoutAnimation
    if (this.sidebar.opened) {
      setSidebarStatus('opened')
    } else {
      setSidebarStatus('closed')
    }
  }

  //关闭左侧菜单栏,等同于折叠
  @Mutation
  private CLOSE_SIDEBAR(withoutAnimation: boolean) {
    this.sidebar.opened = false
    this.sidebar.withoutAnimation = withoutAnimation
    setSidebarStatus('closed')
  }


  //设置折叠菜单的设备信息
  @Mutation
  private TOGGLE_DEVICE(device: DeviceType) {
    this.device = device
  }

  //设置语言
  @Mutation
  private SET_LANGUAGE(language: string) {
    this.language = language
    setLanguage(this.language)
  }


  //设置某某的尺寸
  @Mutation
  private SET_SIZE(size: string) {
    this.size = size
    setSize(this.size)
  }


  //以下为Action,即异步!!!
  //设置折叠或扩张状态时候的动画是否开启
  @Action
  public ToggleSideBar(withoutAnimation: boolean) {
    this.TOGGLE_SIDEBAR(withoutAnimation)
  }


  //设置折叠状态的动画是否开启
  @Action
  public CloseSideBar(withoutAnimation: boolean) {
    this.CLOSE_SIDEBAR(withoutAnimation)
  }


  //给TOGGLE_DEVICE传递参数
  @Action
  public ToggleDevice(device: DeviceType) {
    this.TOGGLE_DEVICE(device)
  }


  //给SET_LANGUAGE传递参数
  @Action
  public SetLanguage(language: string) {
    this.SET_LANGUAGE(language)
  }

  //给SET_SIZE传递参数
  @Action
  public SetSize(size: string) {
    this.SET_SIZE(size)
  }
}

//导出App模块化
export const AppModule = getModule(App)